import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Progress extends Component {
  static propTypes = {
    completed: (props, propName) => {
      if (typeof props[propName] !== 'number')
        return Progress.throwError('Invalid Props: "completed" should ∈ ℝ ');
      if (props[propName] < 0 || props[propName] > 100) {
        return Progress.throwError('Invalid Props: "completed" should be between 0 and 100');
      }
    },
    color: PropTypes.string,
    animation: PropTypes.number,
    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  };

  static defaultProps = {
    completed: 0,
    color: '#0BD318',
    animation: 200,
    height: 15,
  };

  static throwError() {
    // eslint-disable-next-line prefer-rest-params
    return new Error(...arguments);
  }

  render() {
    const { color, completed, animation, height, className, children, ...rest } = this.props;
    const style = {
      width: `${completed}%`,
      transition: `width ${animation}ms`,
      height,
      borderRadius: 90,
      backgroundImage: 'linear-gradient(to right, #26DABE 0%, #108EE9 100%)',
    };

    return (
      <div
        className={className || 'progressbar-container'}
        {...rest}
        style={{
          background: '#dddddd',
          borderRadius: 90,
          marginTop: '9px',
          width: '100%',
          display: 'flex',
        }}
      >
        <div className="progressbar-progress" style={style}>
          <div style={{ display: 'flex' }}>
            {completed > 20 && completed < 100 && (
              <span
                style={{
                  fontSize: '8px',
                  marginTop: '-1.5px',
                  marginLeft: `${completed}%`,
                  color: '#ffffff',
                }}
              >
                {completed}%
              </span>
            )}
            {completed > 10 && completed < 20 && (
              <span
                style={{
                  fontSize: '8px',
                  marginTop: '-1.5px',
                  paddingLeft: '10px',
                  color: '#000000',
                }}
              >
                {completed}%
              </span>
            )}
            {completed >= 0 && completed <= 10 && (
              <span
                style={{
                  fontSize: '8px',
                  marginTop: '-1.5px',
                  paddingLeft: '8px',
                  color: '#000000',
                }}
              >
                {completed}%
              </span>
            )}
            {completed === 100 && (
              <span
                style={{
                  fontSize: '8px',
                  marginTop: '-1.5px',
                  marginLeft: `80%`,
                  color: '#ffffff',
                }}
              >
                已完成
              </span>
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default Progress;
